
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Users, ArrowRight } from "lucide-react";

export const ProfessionalCollaboration = () => {
  const collaborations = [
    { name: "Cross-Curricular Design", members: 156, category: "Curriculum", latest: "45 minutes ago", description: "Creating interdisciplinary learning experiences" },
    { name: "Research & Practice", members: 134, category: "Research", latest: "2 hours ago", description: "Educational research translation and implementation" },
    { name: "Mentorship Hub", members: 198, category: "Professional Growth", latest: "1 hour ago", description: "Supporting new educators and career development" },
    { name: "Innovation Lab", members: 89, category: "EdTech", latest: "3 hours ago", description: "Experimental teaching approaches and pilot programs" },
  ];

  return (
    <Card className="bg-white dark:bg-gray-800 shadow-sm border">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg font-semibold flex items-center gap-2">
            <Users className="w-5 h-5 text-green-600" />
            🤝 Professional Collaboration
          </CardTitle>
          <Button variant="ghost" size="sm" className="text-green-600 hover:text-green-700">
            Explore All <ArrowRight className="w-4 h-4 ml-1" />
          </Button>
        </div>
        <p className="text-sm text-gray-600 dark:text-gray-400">
          Focused on team projects, research clusters, and mentoring
        </p>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4">
          {collaborations.map((collaboration, index) => (
            <div key={index} className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer">
              <div className="flex items-center space-x-4">
                <Avatar>
                  <AvatarFallback>
                    <Users className="w-4 h-4" />
                  </AvatarFallback>
                </Avatar>
                <div>
                  <h4 className="font-semibold text-gray-900 dark:text-gray-100">{collaboration.name}</h4>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">{collaboration.description}</p>
                  <p className="text-xs text-gray-400">
                    {collaboration.members} members • Latest: {collaboration.latest}
                  </p>
                </div>
              </div>
              <Button size="sm" variant="outline">
                <Users className="w-4 h-4 mr-1" />
                Join
              </Button>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};
